<template>
  <div class="p-5">
    <!-- SPU -->
    <div v-show="page == 1">
      <div>
        <el-button type="primary" @click="handleAddUser">新增SPU</el-button>
      </div>
      <el-table :data="spus" style="width: 100%" :border="true" class="mt-5">
        <el-table-column prop="spuId" label="SPUID" align="center" />
        <el-table-column prop="spuName" label="SPU名称" align="center" />
        <el-table-column prop="spuDesc" label="SPU描述" align="center" />
        <el-table-column prop="totalSales" label="SPU销量" align="center" />
        <el-table-column label="SPU状态" align="center">
          <template #default="scope">
            {{ scope.row.spuStatus == '1' ? '上架' : '下架' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="warning" icon="Edit" title="修改SPU信息" @click="handleEditUser(scope.row)"></el-button>
            <el-popconfirm :title="`你确定要删除SPU吗`" width="200px" @confirm="deleteUser(scope.row.spuId)">
              <template #reference>
                <el-button type="danger" icon="Delete" title="删除SPU"></el-button>
              </template>
            </el-popconfirm>
            <el-button type="info" icon="InfoFilled" title="查看SKU"
              @click="lookSku(scope.row.spuId, scope.row.spuName)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- SKU -->
    <div v-show="page == 2">
      <div class="flex justify-between">
        <div class="mr-5">
          <el-button @click="page = 1">
            < 返回</el-button>
              <span class="ml-5"><span class="font-bold">{{ curr }}</span> 的SKU列表</span>
        </div>
        <el-button type="primary" @click="handleAddsku">新增SKU</el-button>
      </div>
      <el-table :data="skus" style="width: 100%" :border="true" class="mt-5">
        <el-table-column prop="skuId" label="SKUID" align="center" />
        <el-table-column prop="skuPrice" label="SKU名称" align="center" />
        <el-table-column label="SKU图片" align="center">
          <template #default="scope">
            <img :src="scope.row.skuImages.split(',')[0]" alt="" class="w-20 h-20" />
          </template>
        </el-table-column>
        <el-table-column prop="skuDesc" label="SKU描述" align="center" />
        <el-table-column prop="skuStock" label="SKU库存" align="center" />
        <el-table-column prop="skuSales" label="SKU销量" align="center" />
        <el-table-column label="SKU状态" align="center">
          <template #default="scope">
            {{ scope.row.skuStatus == '1' ? '上架' : '下架' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="warning" icon="Edit" title="修改SKU信息" @click="handleEditsku(scope.row)"></el-button>
            <el-popconfirm :title="`你确定要删除SKU吗`" width="200px" @confirm="deleteSKU(scope.row.skuId)">
              <template #reference>
                <el-button type="danger" icon="Delete" title="删除SPU"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog :title="dialogType === 'add' ? '新增spu' : '编辑spu'" v-model="dialogVisible" width="30%" align-center>
      <template #default>
        <el-form label-width="120px">
          <el-form-item label="SPU名称" prop="name">
            <el-input placeholder="请输入spu名称" v-model="formData.spuName" />
          </el-form-item>
          <el-form-item label="SPU描述" prop="name">
            <el-input placeholder="请输入spu描述" v-model="formData.spuDesc" />
          </el-form-item>
          <el-form-item label="请选择SPU状态" prop="description">
            <el-radio-group v-model="formData.spuStatus">
              <el-radio :value="1">上架</el-radio>
              <el-radio :value="0">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="flex justify-end gap-2 px-4 pb-4">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- SKU -->
    <el-dialog :title="dialogskuType === 'add' ? '新增sku' : '编辑sku'" v-model="dialogskuVisible" width="30%" align-center>
      <template #default>
        <el-form label-width="120px">
          <el-form-item label="SKU名称" prop="name">
            <el-input placeholder="请输入sku价格" v-model="skuformData.skuPrice" />
          </el-form-item>
          <el-form-item label="SKU描述" prop="name">
            <el-input placeholder="请输入sku描述" v-model="skuformData.skuDesc" />
          </el-form-item>
          <el-form-item label="SKU库存" prop="name">
            <el-input placeholder="请输入sku库存" v-model="skuformData.skuStock" />
          </el-form-item>
          <el-form-item label="请选择SKU状态" prop="description">
            <el-radio-group v-model="skuformData.skuStatus">
              <el-radio :value="1">上架</el-radio>
              <el-radio :value="0">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="flex justify-end gap-2 px-4 pb-4">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSKU">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { deleteSKUAPI, getSKUAPI, newSKUAPI, updateSKUAPI } from '@/apis/sku';
import { addspuAPI, deleteSPUAPI, getSpuAPI, updateSpuAPI } from '@/apis/spu';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

const dialogVisible = ref(false)
const dialogType = ref('add'); // 'add' 或 'edit'
const dialogskuVisible = ref(false)
const dialogskuType = ref('add'); // 'add' 或 'edit'
const spus = ref([])
let page = ref(1)
let curr = ref('')
let currId = ref()
const skus = ref([])

//#region SPU
const formData = ref({
  spuId: '',
  spuName: '',
  spuDesc: '',
  spuStatus: ''
})
const getSPUs = async () => {
  try {
    let res = await getSpuAPI()
    spus.value = res.data
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}
// 新增属性
const handleAddUser = () => {
  dialogType.value = 'add';
  dialogVisible.value = true;
  formData.value = {
    spuId: '',
    spuName: '',
    spuDesc: '',
    spuStatus: ''
  }
};
// 编辑属性
const handleEditUser = (attr) => {
  dialogType.value = 'edit';
  dialogVisible.value = true;
  formData.value = { ...attr };
};
const confirm = async () => {
  if (!formData.value.spuId) {
    try {
      await addspuAPI(formData.value)
      ElMessage.success('新增成功');
      getSPUs()
      dialogVisible.value = false;
    } catch (error) {
      console.log(error)
      ElMessage.error('新增失败');
      dialogVisible.value = false;
    }
  } else {
    try {
      await updateSpuAPI(formData.value.spuId, formData.value)
      ElMessage.success('修改成功');
      getSPUs()
      dialogVisible.value = false;
    } catch (error) {
      ElMessage.success('修改失败');
      dialogVisible.value = false;
    }
  }
}
const deleteUser = async (id) => {
  try {
    await deleteSPUAPI(id)
    ElMessage.success('删除成功');
    getSPUs()
  } catch (error) {
    ElMessage.error('删除数据失败');
  }
}
//#endregion


//SKU
const skuformData = ref({
  skuId: '',
  skuPrice: '',
  skuStock: '',
  skuStatus: '',
  skuDesc: '',
  skuImages: []
})
const lookSku = async (id, name) => {
  try {
    let res = await getSKUAPI(id)
    skus.value = res.data
    curr.value = name
    page.value = 2
    currId.value = id
  } catch (error) {
    ElMessage.error('获取SKU数据失败')
  }
}
// 新增属性
const handleAddsku = () => {
  dialogskuType.value = 'add';
  dialogskuVisible.value = true;
  skuformData.value = {
    skuId: '',
    skuPrice: '',
    skuStock: '',
    skuStatus: '',
    skuDesc: '',
    skuImages: []
  }
};
// 编辑属性
const handleEditsku = (attr) => {
  dialogskuType.value = 'edit';
  dialogskuVisible.value = true;
  skuformData.value = { ...attr };
};
const confirmSKU = async () => {
  if (!skuformData.value.skuId) {
    try {
      await newSKUAPI(skuformData.value)
      ElMessage.success('新增成功');
      let res = await getSKUAPI(currId.value)
      skus.value = res.data
      dialogskuVisible.value = false;
    } catch (error) {
      console.log(error)
      ElMessage.error('新增失败');
      dialogskuVisible.value = false;
    }
  } else {
    try {
      await updateSKUAPI(skuformData.value.skuId, skuformData.value)
      ElMessage.success('修改成功');
      let res = await getSKUAPI(currId.value)
      skus.value = res.data
      dialogskuVisible.value = false;
    } catch (error) {
      ElMessage.success('修改失败');
      dialogskuVisible.value = false;
    }
  }
}
const deleteSKU = async (id) => {
  try {
    await deleteSKUAPI(id)
    ElMessage.success('删除成功');
    let res = await getSKUAPI(currId.value)
    skus.value = res.data

  } catch (error) {
    ElMessage.error('删除数据失败');
  }
}
onMounted(() => {
  getSPUs()
})
</script>

<style lang="scss" scoped></style>